
<style>
    .myfiles{
        width:100px;
        height:100px;
        float: left;
        background: #cccccc;
        cursor: pointer;
        margin: 5px;
    }
    .myfiles2{
        width:auto;
        height:100px;
        float: left;
        background: #cccccc;
        cursor: pointer;
        margin: 5px;
        position: relative;
    }
    .myfiles2 IMG{
        width:100px;
        height:auto;
        float: left;
        margin: 5px;
    }
    .myfiles2 span{
        width:25px;
        height:25px;
        float: right;
       position: absolute;
       background: #000;
       color: #FFF;
       line-height: 25px;
       text-align: center;
       left:0;
       bottom: 0;
    }
    .myfiles:hover{
        background: #999999;
    }
    .iconmyfile{
        width:100%;
        height:70px;
        float: left;
        text-align: center;
        line-height: 70px;
        font-size: 53pt;
    }
    .myfiles span{
        width:100%;
        height:30px;
        float: left;
        text-indent: 10px;
        font-weight: bold;
        line-height: 30px;
    }
    .backbtn{
        width: 25px;
        height:25px;
        float:left;
        background: #3399ff;
        line-height: 25px;
        text-align: center;
        margin-left: 20px;
        color: #FFF;
        cursor: pointer;
    }
</style>
<aside class="right-side">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Quản lí files

        </h1>

        <ol class="breadcrumb">
            <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> Quản lí</a></li>
            <li><a href="javascript:void(0);">Admin</a></li>
            <li class="active">Quản lí files</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <div class="row" id="boxdir">
            <div class="col-xs-12">
                <div class="box" id="loaddir"></div>
            </div>
        </div>
        <div class="row" id="boxfiles" style="display: none;">
            <span class="backbtn"><i class="fa fa-arrow-left"></i></span>
            <div class="col-xs-12">
                <div class="box" id="loadfiles"></div>
            </div>
        </div>
        <!--meu parent -->

        <input type="hidden" value="<?php echo WEB_PATH; ?>/systemadmin/files/loadmydir" id="urlloaddir"/>
        <input type="hidden" value="<?php echo WEB_PATH; ?>/systemadmin/files/loadfile" id="urlloadfiles"/>

        <input type="hidden" value="<?php echo WEB_PATH; ?>/systemadmin/files/delfiles" id="urldel"/>
        <input type="hidden" value="<?php echo WEB_PATH; ?>/systemadmin/news/active" id="urlactive"/>
        <input type="hidden" value="<?php echo WEB_PATH; ?>/systemadmin/news/changeparent" id="urlchnageparent"/>


    </section><!-- /.content -->
</aside><!-- /.right-side -->
<script>

    $(document).ready(function() {
        loaddir();

        $(".backbtn").click(function() {
             $("#boxdir").show();
             $("#boxfiles").hide();
              loaddir();
        });

    });
    function setpage(page) {

        $("#pageflag").val(page);
        loadcata();
    }
    function loaddir() {
        $.ajax({
            url: $("#urlloaddir").val(),
            type: "POST",
            cache: false,
            data: "action=load",
            success: function(dataserver) {
                var data = dataserver.split(":::");
                $("#loaddir").html(data);
            }
        });
    }
    function loadfiles(key) {
        var dir=$("#dir"+key).val();
        $.ajax({
            url: $("#urlloadfiles").val(),
            type: "POST",
            cache: false,
            data: "action=load&dir="+dir,
            success: function(dataserver) {
                $("#boxdir").hide();
                $("#boxfiles").show();
                var data = dataserver.split(":::");
                $("#loadfiles").html(data);
            }
        });
    }
    function delimages(imgid) {

        var mes = '<p class="warning-del">Bạn có muốn xóa file này không?<br/>Xóa file sẽ ảnh hưởng đến hình ảnh sản phẩm.</p><br/>' +
                '<span class="checkdel "><a onclick="confrimdel(' + imgid + ');" href="javascript:void(0);" class="ok">Xác nhận</a></span>' +
                '<span class="checkdel"> <a onclick="closedel();" href="javascript:void(0);" class="ok">Hủy</a></span>';
        $("#ctmes").html(mes);
        $("#warning").show();
    }
    function closedel() {
        $("#warning").hide();
    }
    function confrimdel(imgid) {
        var url = $("#urldel").val();
        $("#ctmes").html('<p class="warning-del">Đang xử lí...</p><br/>');
        $.ajax({
            url: url,
            type: "POST",
            cache: false,
            data: "action=delimg&imgid=" + imgid,
            success: function(dataserver) {
                var data = dataserver.split("*duypc*");

                var mes = '<p class="warning-del">' + data[1] + '</p><br/>' +
                        '<span class = "checkdel"><a onclick = "closedel();" href = "javascript:void(0);" class = "ok" > OK </a></span >';
                $("#ctmes").html(mes);
                if (data[0] == "delok") {
                    $("#" + imgid).remove();
                }
            }
        });
    }

    function setActive(videosId, active) {
        var url = $("#urlactive").val();
        $.ajax({
            url: url,
            type: "POST",
            cache: false,
            data: "action=load&videosId=" + videosId + "&active=" + active,
            success: function(dataserver) {
                loadcata();

            }
        });
    }
</script>